<template>
  <div class="login flexCenter">
    <!-- <div class="team-name hidden-sm-and-down"><img src="@/assets/image/login/team-name.png"
           alt="logo" /></div>
    <div class="form-box"
         v-loading="loading"
         element-loading-background="rgba(0, 0, 0, 0)">
      <div class="title">
        <h1 title="Lin">Lin CMS</h1>
      </div>
      <form class="login-form"
            autocomplete="off"
            @submit.prevent="throttleLogin()">
        <div class="form-item nickname">
          <span class="icon account-icon"></span>
          <input type="text"
                 v-model="form.username"
                 autocomplete="off"
                 placeholder="请填写用户名" />
        </div>
        <div class="form-item password">
          <span class="icon secret-icon"></span>
          <input type="password"
                 v-model="form.password"
                 autocomplete="off"
                 placeholder="请填写用户登录密码" />
        </div>
        <button class="submit-btn"
                type="submit">登录</button>
      </form>
    </div> -->
    <div class="login-box flexbox_row" v-loading="loading">
      <div class="left">
        <div class="flexbox_column">
          <div class="welcome">欢迎登录</div>
          <span class="oms">OMS订单管理系统</span>
        </div>
      </div>

      <div class="right flexbox_column">
        <div class="loginbox" v-if="modularType == 1">
          <div class="logo flexCenter">
            <img src="@/assets/image/login/warehouse.png" alt="" class="img" />
          </div>

          <div>
            <form class="login-form" autocomplete="off" @submit.prevent="throttleLogin()">
              <div class="form-item nickname">
                <span class="icon account-icon"></span>
                <input type="text" v-model="form.username" autocomplete="off" placeholder="请填写用户名" />
              </div>
              <div class="form-item password">
                <span class="icon secret-icon"></span>
                <input type="password" v-model="form.password" autocomplete="off" placeholder="请填写用户登录密码" />
                <div class="flex_row_space-between mtop10">
                  <span></span>
                  <span class="forgetPwd" @click="modularType = 3">忘记密码？</span>
                </div>
              </div>

              <div class="foot flex_row_space-between">
                <div class="btnbox flexbox_column">
                  <button type="submit" class="submit-btn">登 录</button>
                  <div class="mtop10">
                    <span>没有账号？</span>
                    <span class="register" @click="modularType = 2">注册</span>
                  </div>
                </div>

                <div class="autoLogin">
                  <el-checkbox v-model="isAutoLogin">自动登录&nbsp;</el-checkbox>
                  <span v-if="isAutoLogin && typeof reciprocal === 'number'" style="font-size:13px;"
                    >{{ reciprocal }}s</span
                  >
                </div>
              </div>
            </form>
          </div>
        </div>

        <!-- 注册 -->
        <register v-else-if="modularType == 2" @close="modularType = 1" />

        <!-- 忘记密码 -->
        <forget-pwd v-else-if="modularType == 3" @close="modularType = 1" />
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions, mapMutations } from 'vuex'
import AppConfig from '@/router-config/index'
import User from '@/lin/model/user'
import Utils from '@/lin/util/util'
import { setStorage, getStorage } from '@/libs/common'

export default {
  name: 'login',
  components: {
    ForgetPwd: () => import('./forget-pwd.vue'),
    Register: () => import('./register.vue'),
  },
  data() {
    return {
      modularType: 1, // 登录页模块 1.登录 2. 注册 3. 忘记密码
      isAutoLogin: getStorage('autoLogin') || false,
      loading: false, // 加载动画
      wait: 2000, // 2000ms之内不能重复发起请求
      throttleLogin: null, // 节流登录
      reciprocal: false,
      form: {
        username: 'root',
        password: '123456',
      },
    }
  },
  methods: {
    async login() {
      const { username, password } = this.form
      try {
        this.loading = true
        await User.getToken(username, password)
        await this.getInformation()
        setStorage('autoLogin', this.isAutoLogin)
        this.loading = false
        this.$router.push(AppConfig.defaultRoute)
        this.reciprocal = false
        this.$message.success('登录成功')
      } catch (e) {
        this.loading = false
        this.reciprocal = false
        console.log(e)
      }
    },
    async getInformation() {
      try {
        // 尝试获取当前用户信息
        const user = await User.getPermissions()
        this.setUserAndState(user)
        this.setUserPermissions(user.permissions)
      } catch (e) {
        console.log(e)
      }
    },

    autoLogin() {
      this.reciprocal = 2
      const timeout = setInterval(() => {
        this.reciprocal--
        if (this.reciprocal <= 0) {
          clearTimeout(timeout)
          this.throttleLogin()
        }
      }, 1000)
    },

    ...mapActions(['setUserAndState']),
    ...mapMutations({
      setUserPermissions: 'SET_USER_PERMISSIONS',
    }),
  },

  created() {
    // 节流登录
    this.throttleLogin = Utils.throttle(this.login, this.wait)
  },

  mounted() {
    if (this.isAutoLogin) {
      // 自动登录
      this.autoLogin()
    }
  },
}
</script>

<style lang="scss">
@import './login.scss';
// .login {
//   width: 100%;
//   height: 100%;
//   background: #1b2c5f url('../../assets/image/login/login-ba.png') no-repeat center center;

//   .team-name {
//     position: fixed;
//     left: 40px;
//     top: 50%;
//     width: 50px;
//     transform: translateY(-50%);
//   }

//   .form-box {
//     position: fixed;
//     left: 50%;
//     top: 50%;
//     transform: translate(-50%, -50%);
//     width: 445px;

//     .title {
//       height: 37px;
//       font-size: 30px;
//       line-height: 37px;
//       margin-bottom: 15%;

//       h1 {
//         padding-left: 74px;
//         box-sizing: border-box;
//         text-align: left;
//         color: #8c98ae;
//       }
//     }

//     .login-form {
//       width: 100%;

//       .form-item {
//         width: 100%;
//         height: 40px;
//         box-sizing: border-box;
//         padding-bottom: 13px;
//         margin-bottom: 34px;

//         input {
//           width: 100%;
//           height: 100%;
//           background: transparent;
//           color: #c4c9d2;
//           font-size: 14px;
//           padding-left: 74px;
//           box-sizing: border-box;
//         }
//       }

//       .form-item.nickname {
//         background: url('../../assets/image/login/nickname.png') no-repeat;
//         background-size: 100% auto;
//         background-position: left bottom;
//       }

//       .form-item.password {
//         background: url('../../assets/image/login/password.png') no-repeat;
//         background-size: 100% auto;
//         background-position: left bottom;
//       }

//       .submit-btn {
//         width: 100%;
//         height: 70px;
//         color: #c4c9d2;
//         font-size: 16px;
//         text-align: left;
//         box-sizing: border-box;
//         padding: 0 10px;
//         padding-left: 74px;
//         background: url('../../assets/image/login/login-btn.png') no-repeat;
//         background-size: 90% auto;
//         background-position: center bottom;
//         border: none;
//         cursor: pointer;
//       }
//     }
//   }
// }
</style>
